<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <form method="get" th:action="@{/hotevents/selectPage}">
        <label>关键词:</label>&nbsp;
        <input type="hidden" name="page" value="1">
        <input type="text" name="keyWord"/>
        &nbsp;<input type="submit" value="提交"/>
    </form>
    <h2>热点事件排行榜</h2>
    <table class="table">
        <tr>
            <th id="a1">{{ message1 }}</th>
            <th id="a2">{{ message2 }}</th>
            <th id="a3">{{ message3 }}</th>
        </tr>
        <tr th:each="i:${hotevents}">
            <td><a th:href="@{/comments/selectByHId(hId=${i.id})}" th:text="${i.keyword}"></a></td>
            <td th:text="${i.searchsum}"></td>
            <td th:text="${i.createdate}"></td>
        </tr>
    </table>
    <a th:href="@{/hotevents/selectAll}">首页</a>&nbsp;&nbsp;
    <a th:href="@{/hotevents/selectPage(page=${page}-1,keyWord=${keyWord})}">上一页</a>&nbsp;&nbsp;
    <a th:href="@{/hotevents/selectPage(page=${page}+1,keyWord=${keyWord})}">下一页</a>&nbsp;&nbsp;
    <a th:href="@{/hotevents/selectPage(page=${pageCount})}">末页</a>&nbsp;&nbsp;
    第 <span th:text="${page}"></span> 页/共 <span th:text="${pageCount}"></span> 页
</div>
</body>
</html>
<script>
    new Vue({
        el: '#a1',
        data: {
            message1: '关键词'
        }
    });
    new Vue({
        el: '#a2',
        data: {
            message2: '搜索指数'
        }
    });
    new Vue({
        el: '#a3',
        data: {
            message3: '创建时间'
        }
    });
</script>